<template>
  <el-backtop :visibility-height="visibilityHeight" :right="right" :bottom="bottom">
      <i class="iconfont icon-dingbu"></i>
  </el-backtop>
</template>

<script lang="ts">
  // 回到顶部插件
import {Vue, Component, Prop} from "vue-property-decorator"
@Component({})
export default class SBacktop extends Vue{
  //滚动高度达到此参数值才出现
  @Prop({
    type:Number,
    default:(()=>{
      return 200
    })
  }) readonly visibilityHeight!:number
  //控制其显示位置, 距离页面右边距
  @Prop({
    type:Number,
    default:(()=>{
      return 40
    })
  }) readonly right!:number
  //控制其显示位置, 距离页面底部距离
  @Prop({
    type:Number,
    default:(()=>{
      return 40
    })
  }) readonly bottom!:number
}
</script>

<style>
  .el-backtop{
    background-color: #797979;
    color: #FFFFFF;
  }
  .el-backtop:hover{
    background-color: #797979;
    opacity: 0.8;
  }
</style>
